<template>
  <transition name="fromRight">
    <div class="edit-text-root" v-show="isShow">
      <div class="input-box">
        <textarea class="input" type="text" v-model="text"></textarea>
      </div>
      
      <div class="submit-box">
        <button 
          class="btn"
          @touchend="onSubmit">
          提交
        </button>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'EditText',

    data () {
      return {
        // 存放旧的url
        oldURL: '',
        // 当前输入框内文案
        text: '',
        // 当前组件是否显示标志位
        isShow: false,
        oldTitle: ''
      }
    },

    mounted () {
      // 思路:
      // 外部调用内部show方法 触发url改变 返回promise
      // 内部监听url 如果url的问号后面包含editing=true文案 则显示当前组件
      // 当编辑完成时候调用一开始返回的promise的resolve方法
      // 外部使用方法:
      // let newText = await this.$EditText.show('要编辑的文案默认值')
      // console.log(newText)
      // 当前组件需要注册再vue的prototype中
      this.addListener()
    },

    methods: {
      /*
       * 供外部调用方法 显示编辑页
       */
      show (text = '', title) {
        if (title) {
          this.oldTitle = window.document.title
          this.$Title.set(title)
        }
        return new Promise((resolve, reject) => {
          this.text = text
          this.resolve = resolve
          this.reject = reject
          this.changeUrl()
        })
      },

      /*
       * 监听页面地址变化
       */
      addListener () {
        window.addEventListener('hashchange', (event) => {
          this.isShow = false
          let newURL = event.newURL
          let query = newURL.split('?')[1]
          if (!query) return this.recoveryTitle()
          if (!/editing=true/.test(query)) return this.recoveryTitle()
          this.oldURL = event.oldURL
          this.isShow = true
        })
      },

      /*
       * 改变地址
       */
      changeUrl () {
        let query = window.location.href.split('?')[1]
        if (!query) {
          window.location.href += '?editing=true'
        } else {
          window.location.href += '&editing=true'
        }
      },

      /*
       * 提交按钮回调
       */
      onSubmit () {
        this.resolve(this.text)
        // window.location.replace(this.oldURL)
        window.history.go(-1)
      },

      recoveryTitle () {
        if (!this.oldTitle) return
        this.$Title.set(this.oldTitle)
        this.oldTitle = ''
      }
    }
  }
</script>

<style lang="stylus" scoped>
.edit-text-root
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  background #eee
  .input-box
    width 100%
    height auto
    background #fff
    margin-top 0.4rem
    .input
      width 100%
      height 5rem
      line-height 0.6rem
      font-size 0.4rem
      padding 0.2rem
      box-sizing border-box
      border 0
  .text-count
    padding-right 0.5rem
    text-align right
    line-height 1rem
    color #999
  
  .submit-box
    display block
    margin 1rem auto
    width 95%
    font-size 0.4rem
    border 0
    border-radius 0.1rem
    text-align center
    overflow hidden
    .btn
      width 100%
      height 100%
      padding 0.2rem 0
      font-size 0.4rem
      color #fff
      background #404040
      border 0
      &.disabled
        opacity 0.5
</style>
